/**
 * @file MultiDimensionalEvaluation.vue
 * @description 多维度评价功能页面 - AI驱动的学生综合素质评估系统
 * @created 2024-03-20
 */

<template>
  <div class="multi-dimensional-evaluation">
    <div class="page-header">
      <h2>多维度评价</h2>
      <div class="header-actions">
        <div class="student-select">
          <span class="label">当前学生：</span>
          <select v-model="currentStudent">
            <option value="">选择学生</option>
            <option v-for="student in students" 
                    :key="student.id" 
                    :value="student.id">
              {{ student.name }} ({{ student.studentId }})
            </option>
          </select>
          <button class="primary-btn" @click="generateReport">生成评估报告</button>
        </div>
      </div>
    </div>

    <!-- 评估维度卡片 -->
    <div class="evaluation-grid">
      <div class="dimension-card" v-for="dimension in dimensions" :key="dimension.id">
        <div class="dimension-header">
          <span class="dimension-icon">{{ dimension.icon }}</span>
          <h3>{{ dimension.name }}</h3>
        </div>
        <div class="score-circle" :style="{ '--score': dimension.score }">
          <span class="score-value">{{ dimension.score }}</span>
        </div>
        <div class="dimension-details">
          <div class="detail-item" v-for="(value, key) in dimension.details" :key="key">
            <span class="detail-label">{{ key }}</span>
            <div class="detail-bar">
              <div class="bar-fill" :style="{ width: value + '%' }"></div>
            </div>
            <span class="detail-value">{{ value }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- AI分析报告 -->
    <div class="ai-analysis">
      <h3>AI评估报告</h3>
      <div class="analysis-content">
        <div class="analysis-section" v-for="section in aiAnalysis" :key="section.title">
          <h4>{{ section.title }}</h4>
          <p>{{ section.content }}</p>
          <div class="recommendations" v-if="section.recommendations">
            <h5>改进建议：</h5>
            <ul>
              <li v-for="(rec, index) in section.recommendations" :key="index">
                {{ rec }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 学生数据
const students = ref([
  { id: 1, name: '张三', studentId: '2021001' },
  { id: 2, name: '李四', studentId: '2021002' }
])

const currentStudent = ref('')

// 评估维度数据
const dimensions = ref([
  {
    id: 1,
    name: '学习能力',
    icon: '📚',
    score: 85,
    details: {
      '知识掌握': 88,
      '学习方法': 82,
      '创新思维': 85
    }
  },
  {
    id: 2,
    name: '课堂表现',
    icon: '🎯',
    score: 92,
    details: {
      '出勤率': 95,
      '参与度': 90,
      '互动质量': 91
    }
  },
  {
    id: 3,
    name: '作业完成',
    icon: '📝',
    score: 88,
    details: {
      '准时提交': 92,
      '完成质量': 85,
      '创新程度': 87
    }
  },
  {
    id: 4,
    name: '综合素质',
    icon: '🌟',
    score: 90,
    details: {
      '团队协作': 92,
      '沟通能力': 88,
      '领导力': 90
    }
  }
])

// AI分析报告
const aiAnalysis = ref([
  {
    title: '学习能力分析',
    content: '该学生在知识掌握方面表现优秀，特别是在实践应用环节。学习方法较为科学，但在创新思维方面还有提升空间。',
    recommendations: [
      '建议参加更多创新实践活动',
      '可以尝试跨学科学习，拓展思维方式',
      '建议加强课后知识整理和归纳'
    ]
  },
  {
    title: '行为习惯分析',
    content: '学生课堂出勤率高，参与度积极。在团队协作中表现突出，善于与他人沟通交流。',
    recommendations: [
      '可以尝试担任小组leader，锻炼领导能力',
      '建议在课堂讨论中提出更多个人见解'
    ]
  }
])

// 生成评估报告
const generateReport = () => {
  // TODO: 实现报告生成逻辑
  console.log('生成评估报告')
}
</script>

<style scoped>
.multi-dimensional-evaluation {
  padding: 24px;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.student-select {
  display: flex;
  align-items: center;
  gap: 12px;
}

.evaluation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.dimension-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dimension-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.dimension-icon {
  font-size: 24px;
}

.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 20px auto;
  background: conic-gradient(
    #1890ff calc(var(--score) * 3.6deg),
    #f0f0f0 0deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.score-circle::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 50%;
}

.score-value {
  position: relative;
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
}

.dimension-details {
  margin-top: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.detail-label {
  width: 80px;
  font-size: 14px;
}

.detail-bar {
  flex: 1;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: #1890ff;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.detail-value {
  width: 45px;
  text-align: right;
  font-size: 14px;
  color: #666;
}

.ai-analysis {
  margin-top: 32px;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.analysis-section {
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.analysis-section h4 {
  margin-bottom: 12px;
  color: #1890ff;
}

.recommendations {
  margin-top: 16px;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
}

.recommendations h5 {
  color: #666;
  margin-bottom: 8px;
}

.recommendations ul {
  padding-left: 20px;
}

.recommendations li {
  margin-bottom: 8px;
  color: #666;
}

.student-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.student-id {
  color: #999;
  font-size: 12px;
}

select {
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  min-width: 200px;
}

.primary-btn {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary-btn:hover {
  background: #40a9ff;
}
</style> 